<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>木鱼敲一敲，烦恼自然消</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        /* 基础样式和变量 */
        :root {
            --primary-color: #4a6fa5;
            --secondary-color: #6c8ebd;
            --background-color: #f5f7fa;
            --card-background: #ffffff;
            --text-color: #333333;
            --border-color: #e0e0e0;
            --error-color: #e74c3c;
            --success-color: #2ecc71;
            --shadow-color: rgba(0, 0, 0, 0.1);
            --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            --tip-background: #e3f2fd;
            --muyu-color: #8B4513;
            --muyu-shadow: #654321;
            --mallet-color: #D2691E;
            --gongde-color: #FFD700;
        }

        /* 暗黑模式变量 */
        [data-theme="dark"] {
            --primary-color: #5b8ad6;
            --secondary-color: #7fa3d7;
            --background-color: #1a1a2e;
            --card-background: #222438;
            --text-color: #e0e0e0;
            --border-color: #444444;
            --shadow-color: rgba(0, 0, 0, 0.3);
            --tip-background: #1a2a3a;
            --muyu-color: #A0522D;
            --muyu-shadow: #8B4513;
            --mallet-color: #CD853F;
            --gongde-color: #FFD700;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-family);
            background-color: var(--background-color);
            color: var(--text-color);
            line-height: 1.6;
            transition: background-color 0.3s, color 0.3s;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 头部样式 */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
        }

        header h1 {
            font-size: 2rem;
            color: var(--primary-color);
        }

        /* 头部控件区域 */
        .header-controls {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        /* 分享按钮 */
        .share-button {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 2px 6px;
            background-color: var(--secondary-color);
            color: white;
            border-radius: 15px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s, transform 0.1s;
        }

        .share-button:hover {
            background-color: var(--primary-color);
        }

        .share-button:active {
            transform: scale(0.98);
        }

        .share-button i {
            font-size: 16px;
        }

        /* 主题切换开关 */
        .theme-toggle {
            position: relative;
        }

        .theme-switch {
            opacity: 0;
            position: absolute;
        }

        .theme-switch-label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            width: 50px;
            height: 26px;
            background-color: #83d8ff;
            border-radius: 100px;
            position: relative;
            transition: background-color 0.3s;
            padding: 0 5px;
        }

        .theme-switch:checked + .theme-switch-label {
            background-color: #4a4e69;
        }

        .theme-switch-label .fa-sun {
            color: #f39c12;
        }

        .theme-switch-label .fa-moon {
            color: #f1c40f;
        }

        .theme-switch-label .slider {
            position: absolute;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            transition: 0.3s;
            background-color: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            left: 2px;
        }

        .theme-switch:checked + .theme-switch-label .slider {
            transform: translateX(24px);
        }

        /* 主内容区域 */
        main {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            padding: 40px 0;
        }

        /* 功德计数器 */
        .gongde-counter {
            font-size: 2rem;
            font-weight: bold;
            color: var(--primary-color);
            margin-bottom: 40px;
            text-align: center;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* 游戏区域 */
        .game-area {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }

        /* 扩大的点击区域 */
        .extended-click-area {
            position: absolute;
            width: 350px;
            height: 300px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 5;
            cursor: pointer;
            /* 调试时可以取消注释查看区域 */
            /* background: rgba(255, 0, 0, 0.1); */
        }

        /* 木鱼容器 */
        .muyu-container {
            position: relative;
            cursor: pointer;
            user-select: none;
            animation: float 3s ease-in-out infinite;
        }

        /* 木鱼主体 */
        .muyu {
            width: 200px;
            height: 120px;
            /* background: 
                radial-gradient(ellipse at 30% 20%, rgba(255, 215, 0, 0.3) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 80%, rgba(139, 69, 19, 0.2) 0%, transparent 50%),
                linear-gradient(145deg, var(--muyu-color), var(--muyu-shadow));
            border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
            box-shadow: 
                0 20px 35px rgba(0, 0, 0, 0.4),
                0 8px 15px rgba(0, 0, 0, 0.2),
                inset 0 8px 15px rgba(255, 255, 255, 0.15),
                inset 0 -8px 15px rgba(0, 0, 0, 0.25),
                inset 2px 2px 8px rgba(255, 215, 0, 0.1); */
            display: flex;
            justify-content: center;
            align-items: center;
            transition: transform 0.1s ease-out;
            position: relative;
            overflow: hidden;
        }





        .muyu-container:active .muyu {
            transform: scale(0.95) rotateX(5deg);
        }

        .muyu.shake {
            animation: shake 0.3s ease-in-out;
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0) rotate(0deg); }
            25% { transform: translateX(-3px) rotate(-1deg); }
            75% { transform: translateX(3px) rotate(1deg); }
        }

        /* 木槌颜色选择器 */
        .mallet-color-selector {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-top: 200px;
            padding: 15px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .color-label {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-color);
            white-space: nowrap;
        }

        .color-options {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .color-option {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            cursor: pointer;
            border: 3px solid transparent;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .color-option::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 50%;
            border-radius: 50% 50% 0 0;
        }

        .color-option::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            top: 50%;
            border-radius: 0 0 50% 50%;
        }

        /* 为每个颜色选项设置对应的颜色 */
        .color-option[data-head-color="#FFD700"]::before { background: #FFD700; }
        .color-option[data-head-color="#FFD700"]::after { background: #8B4513; }
        
        .color-option[data-head-color="#FF6B6B"]::before { background: #FF6B6B; }
        .color-option[data-head-color="#FF6B6B"]::after { background: #4A4A4A; }
        
        .color-option[data-head-color="#4ECDC4"]::before { background: #4ECDC4; }
        .color-option[data-head-color="#4ECDC4"]::after { background: #2C3E50; }
        
        .color-option[data-head-color="#45B7D1"]::before { background: #45B7D1; }
        .color-option[data-head-color="#45B7D1"]::after { background: #34495E; }
        
        .color-option[data-head-color="#96CEB4"]::before { background: #96CEB4; }
        .color-option[data-head-color="#96CEB4"]::after { background: #5D4E75; }
        
        .color-option[data-head-color="#FFEAA7"]::before { background: #FFEAA7; }
        .color-option[data-head-color="#FFEAA7"]::after { background: #6C5CE7; }
        
        .color-option[data-head-color="#FD79A8"]::before { background: #FD79A8; }
        .color-option[data-head-color="#FD79A8"]::after { background: #2D3436; }
        
        .color-option[data-head-color="#A29BFE"]::before { background: #A29BFE; }
        .color-option[data-head-color="#A29BFE"]::after { background: #636E72; }

        .color-option:hover {
            transform: scale(1.1);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .color-option.active {
            border-color: var(--primary-color);
            transform: scale(1.15);
            box-shadow: 0 0 20px rgba(var(--primary-color-rgb), 0.5);
        }

        /* 木槌 */
        .mallet {
            width: 80px;
            height: 180px;
            position: absolute;
            cursor: pointer;
            transition: transform 0.2s ease-out;
            transform-origin: 50% 90%;
            top: -30px;
            right: -40px;
            transform: rotate(45deg);
            z-index: 10;
        }

        .mallet-handle {
            width: 12px;
            height: 120px;
            background: linear-gradient(to right, var(--mallet-handle-color, #8B4513), var(--mallet-handle-color-light, #A0522D));
            border-radius: 6px;
            margin: 0 auto;
            box-shadow: 2px 0 4px rgba(0, 0, 0, 0.3);
            transition: background 0.3s ease;
        }

        .mallet-head {
            width: 50px;
            height: 50px;
            background: linear-gradient(145deg, var(--mallet-head-color, #FFD700), var(--mallet-head-color-dark, #DAA520));
            border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
            margin: 0 auto;
            box-shadow: 
                0 8px 15px rgba(0, 0, 0, 0.3),
                inset 0 3px 6px rgba(255, 255, 255, 0.2),
                inset 0 -3px 6px rgba(0, 0, 0, 0.2);
            position: relative;
            transform: rotate(-45deg);
            transition: background 0.3s ease;
        }

        .mallet-head::before {
            content: '';
            position: absolute;
            top: 15%;
            left: 15%;
            right: 15%;
            bottom: 25%;
            background: 
                radial-gradient(ellipse at 40% 30%, rgba(255, 255, 255, 0.3) 0%, transparent 60%),
                radial-gradient(ellipse at 60% 70%, rgba(255, 215, 0, 0.2) 0%, transparent 50%);
            border-radius: 50%;
        }

        .mallet-head::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 80%;
            height: 60%;
            background: radial-gradient(ellipse, rgba(0, 0, 0, 0.1) 0%, transparent 70%);
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }

        .mallet:hover {
            transform: rotate(40deg);
        }

        .mallet.hitting {
            transform: rotate(-15deg) translateX(-20px) translateY(20px);
        }

        .mallet.hitting-back {
            transform: rotate(45deg);
        }

        /* 浮动动画 */
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        /* 功德动画 */
        .gongde-animation {
            position: absolute;
            font-size: 2rem;
            font-weight: bold;
            color: var(--gongde-color);
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            opacity: 0;
            animation: riseAndFade 2s ease-out forwards;
            pointer-events: none;
            z-index: 100;
        }

        @keyframes riseAndFade {
            0% {
                transform: translateY(0) scale(0.5) rotate(-10deg);
                opacity: 1;
            }
            30% {
                transform: translateY(-50px) scale(1.2) rotate(5deg);
                opacity: 1;
            }
            100% {
                transform: translateY(-150px) scale(1) rotate(0deg);
                opacity: 0;
            }
        }

        /* 分享通知样式 */
        .share-notification {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: var(--success-color);
            color: white;
            padding: 10px 20px;
            border-radius: 4px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            transform: translateY(100px);
            opacity: 0;
            transition: transform 0.3s, opacity 0.3s;
            z-index: 1000;
        }

        .share-notification.show {
            transform: translateY(0);
            opacity: 1;
        }

        /* 击打效果 */
        .hit-effect {
            position: absolute;
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: 
                radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8) 0%, transparent 30%),
                radial-gradient(circle, rgba(255, 215, 0, 0.9) 0%, rgba(255, 193, 7, 0.7) 40%, transparent 80%);
            animation: ripple 0.8s ease-out;
            pointer-events: none;
            box-shadow: 
                0 0 30px rgba(255, 215, 0, 0.8),
                0 0 60px rgba(255, 215, 0, 0.6),
                0 0 90px rgba(255, 215, 0, 0.4);
        }

        @keyframes ripple {
            0% {
                transform: scale(0);
                opacity: 1;
                box-shadow: 
                    0 0 30px rgba(255, 215, 0, 0.8),
                    0 0 60px rgba(255, 215, 0, 0.6),
                    0 0 90px rgba(255, 215, 0, 0.4);
            }
            50% {
                opacity: 0.8;
                box-shadow: 
                    0 0 50px rgba(255, 215, 0, 0.9),
                    0 0 100px rgba(255, 215, 0, 0.7),
                    0 0 150px rgba(255, 215, 0, 0.5);
            }
            100% {
                transform: scale(4);
                opacity: 0;
                box-shadow: 
                    0 0 20px rgba(255, 215, 0, 0.3),
                    0 0 40px rgba(255, 215, 0, 0.2),
                    0 0 60px rgba(255, 215, 0, 0.1);
            }
        }

        /* 页脚样式 */
        footer {
            margin-top: 30px;
            text-align: center;
            font-size: 14px;
            color: var(--text-color);
            opacity: 0.8;
            padding-top: 15px;
            border-top: 1px solid var(--border-color);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            header {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }

            .gongde-counter {
                font-size: 1.5rem;
            }

            .muyu {
                width: 150px;
                height: 90px;
            }

            .mallet {
                width: 60px;
                height: 140px;
                top: -20px;
                right: -30px;
            }

            .mallet-head {
                width: 40px;
                height: 40px;
            }

            .mallet-handle {
                width: 10px;
                height: 100px;
            }

            .mallet.hitting {
                transform: rotate(-15deg) translateX(-15px) translateY(15px);
            }

            .mallet:hover {
                transform: rotate(40deg);
            }

            .mallet.hitting-back {
                transform: rotate(45deg);
            }
            
            /* 手机端扩大点击区域 */
            .extended-click-area {
                width: 280px;
                height: 250px;
            }
            
            .mallet-color-selector {
                margin-top: 150px;
                padding: 10px;
            }
            
            .color-options {
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-gopuram"></i> 木鱼敲一敲，烦恼自然消</h1>
            <div class="header-controls">
                <div class="theme-toggle">
                    <input type="checkbox" id="theme-switch" class="theme-switch">
                    <label for="theme-switch" class="theme-switch-label">
                        <i class="fas fa-sun"></i>
                        <i class="fas fa-moon"></i>
                        <span class="slider"></span>
                    </label>
                </div>
                <div class="share-button" id="share-button" title="分享给朋友">
                    <i class="fas fa-share-alt"></i>
                    <span>分享</span>
                </div>
            </div>
        </header>
        
        <main>
            <div class="gongde-counter">
                功德: <span id="gongde-count">0</span>
            </div>
            
            <div class="game-area">
                <!-- 扩大的点击区域 -->
                <div class="extended-click-area" id="extended-click-area"></div>
                
                <div class="mallet" id="mallet">
                    <div class="mallet-head"></div>
                    <div class="mallet-handle"></div>
                </div>
                
                <div class="muyu-container" id="muyu-container">
                    <svg class="muyu" id="muyu" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="154" viewBox="0 0 516 447">
                        <path d="M0 0 C13.02715973 11.7107036 19.73786289 27.29523218 21.328125 44.59375 C22.20886888 62.68569723 16.59038816 78.24263843 4.828125 91.90625 C-2.12263571 99.29534697 -10.81817007 104.97654376 -20.484375 108.21875 C-21.474375 108.21875 -22.464375 108.21875 -23.484375 108.21875 C-23.15953125 109.97251953 -23.15953125 109.97251953 -22.828125 111.76171875 C-22.54664583 113.30985418 -22.26540856 114.85803361 -21.984375 116.40625 C-21.84128906 117.17517578 -21.69820313 117.94410156 -21.55078125 118.73632812 C-20.85198785 122.61296773 -20.29398483 126.260221 -20.484375 130.21875 C-23.3072084 131.6301667 -25.03134165 130.87797191 -28.12109375 130.30078125 C-35.85636208 129.04006952 -43.48376228 128.86381148 -51.296875 128.90625 C-52.37411331 128.90948273 -52.37411331 128.90948273 -53.47311401 128.91278076 C-83.28636817 129.05533526 -113.6244097 134.11649607 -140.25390625 148.08203125 C-148.98574735 151.15454124 -156.65420951 148.23141791 -165.109375 145.40625 C-188.17943819 137.43613435 -188.17943819 137.43613435 -211.484375 141.21875 C-219.44936296 145.39646427 -223.51375561 150.245282 -226.796875 158.53125 C-228.64186126 168.42708538 -227.70996748 177.40692533 -222.31640625 186.1015625 C-217.16619848 192.73516345 -210.43154506 195.46401485 -202.484375 197.21875 C-193.10600145 198.22357574 -185.36362961 194.70015558 -177.96875 189.234375 C-175.45606907 187.19578481 -173.09790699 185.05280277 -170.734375 182.84375 C-143.14093839 157.66632858 -101.25581027 143.20839982 -64.15625 143.015625 C-63.28599182 143.00992493 -62.41573364 143.00422485 -61.519104 142.99835205 C-59.68706456 142.98895908 -57.85500865 142.98239095 -56.02294922 142.97851562 C-53.25587727 142.9688253 -50.48955405 142.93775355 -47.72265625 142.90625 C-38.18815506 142.85088423 -29.59682699 143.10615048 -20.484375 146.21875 C-16.11469495 165.38261954 -24.87725298 192.73403781 -34.7734375 209.12890625 C-39.62442204 216.79428257 -45.06699737 223.7908693 -51.484375 230.21875 C-52.36480469 231.11078125 -53.24523437 232.0028125 -54.15234375 232.921875 C-61.76544885 240.38857423 -70.23428777 245.97108206 -79.484375 251.21875 C-80.60457031 251.85683594 -81.72476562 252.49492187 -82.87890625 253.15234375 C-136.7211402 281.82987998 -212.61015455 279.11226884 -269.86621094 261.98828125 C-289.79851388 255.79723642 -313.02908384 246.7717744 -326.96875 230.484375 C-329.09927909 228.70527339 -330.48642733 228.88547886 -333.234375 228.96875 C-334.21019531 228.99195313 -335.18601562 229.01515625 -336.19140625 229.0390625 C-339.77619579 229.23467379 -343.3445212 229.54226695 -346.921875 229.84375 C-359.60464719 230.71842394 -369.2985051 228.19358301 -379.734375 220.96875 C-388.35730162 212.34582338 -392.32975267 202.6141477 -392.796875 190.53125 C-392.68818981 180.78581139 -389.2187117 172.27819261 -382.484375 165.21875 C-376.49435328 159.85090977 -370.41520175 156.69142481 -362.484375 155.21875 C-362.44473633 154.56616211 -362.40509766 153.91357422 -362.36425781 153.24121094 C-359.81607199 113.04745115 -348.79583895 78.69125191 -320.484375 49.21875 C-320.00194336 48.69990234 -319.51951172 48.18105469 -319.02246094 47.64648438 C-305.53492118 33.1651259 -289.95928481 22.37364509 -272.484375 13.21875 C-270.94910156 12.39117187 -270.94910156 12.39117187 -269.3828125 11.546875 C-249.74321262 1.27711118 -228.34741336 -3.96208261 -206.484375 -6.78125 C-205.47761719 -6.91402344 -204.47085938 -7.04679687 -203.43359375 -7.18359375 C-192.85340178 -8.30132749 -182.10613281 -7.94231553 -171.484375 -7.78125 C-170.04602295 -7.76239746 -170.04602295 -7.76239746 -168.57861328 -7.74316406 C-141.20967585 -7.28207486 -120.26946805 1.30735401 -95.8984375 13.1171875 C-92.80184482 14.61053386 -89.70672579 16.01202604 -86.484375 17.21875 C-86.02998047 16.33123047 -86.02998047 16.33123047 -85.56640625 15.42578125 C-83.01716991 10.61752932 -80.60557599 6.86074157 -76.484375 3.21875 C-75.69160156 2.42210937 -75.69160156 2.42210937 -74.8828125 1.609375 C-66.62088571 -6.33613758 -54.90561697 -12.07705374 -43.484375 -13.40625 C-42.88625 -13.48101562 -42.288125 -13.55578125 -41.671875 -13.6328125 C-27.05549527 -14.62463827 -11.28594948 -9.39862459 0 0 Z M-194.484375 46.21875 C-195.72111751 49.85168114 -195.82895703 51.46066953 -194.234375 54.96875 C-191.95602188 57.89806116 -190.29901375 59.09478323 -186.609375 59.65625 C-183.32767901 59.44354584 -183.32767901 59.44354584 -180.609375 57.15625 C-178.24328593 54.33348938 -178.24328593 54.33348938 -177.859375 50.71875 C-178.65040432 46.2889858 -179.84912285 44.82664828 -183.484375 42.21875 C-188.47216694 41.28353901 -191.08263354 42.5254307 -194.484375 46.21875 Z " fill="#97AAF3" transform="translate(441.484375,114.78125)"/>
                        <path d="M0 0 C-0.33 0.66 -0.66 1.32 -1 2 C0.175625 2.7115625 0.175625 2.7115625 1.375 3.4375 C9.27148912 8.84427255 15.22328175 14.59628192 19.9375 22.9375 C20.30270752 23.58106445 20.66791504 24.22462891 21.04418945 24.88769531 C25.94874495 34.04408703 27.4935206 42.60645436 27.375 52.9375 C27.38660156 53.94490234 27.39820313 54.95230469 27.41015625 55.99023438 C27.38085863 63.58320015 26.43819527 71.12360946 23 78 C22.34 78 21.68 78 21 78 C20.87625 78.928125 20.7525 79.85625 20.625 80.8125 C20 84 20 84 18 87 C17.731875 87.680625 17.46375 88.36125 17.1875 89.0625 C15.58862005 91.67119887 13.78748944 91.88500422 11 93 C10.32547549 94.32937538 9.65986528 95.6632876 9 97 C4.46796372 101.96524564 -0.73611305 105.16747429 -6.80078125 107.95703125 C-9.20542616 109.03247338 -9.20542616 109.03247338 -12 111 C-12.99 111 -13.98 111 -15 111 C-15 111.66 -15 112.32 -15 113 C-22.67073171 116.1097561 -22.67073171 116.1097561 -26 115 C-26.33 115.66 -26.66 116.32 -27 117 C-28.485 116.505 -28.485 116.505 -30 116 C-31.90234776 116 -33.80471189 116.00132356 -35.70703125 116.01171875 C-44.81150719 115.96518821 -51.74267306 113.84945889 -60 110 C-60.67933594 109.70609375 -61.35867188 109.4121875 -62.05859375 109.109375 C-63.6875 108.375 -63.6875 108.375 -66 107 C-66.33 106.01 -66.66 105.02 -67 104 C-68.72138304 102.79824453 -68.72138304 102.79824453 -70.8125 101.875 C-71.49957031 101.54242188 -72.18664062 101.20984375 -72.89453125 100.8671875 C-74.91699695 100.03418678 -76.86693207 99.46975429 -79 99 C-79.061875 98.236875 -79.12375 97.47375 -79.1875 96.6875 C-80.2582969 93.14563333 -81.90960169 92.82254259 -85 91 C-85 89.68 -85 88.36 -85 87 C-85.66 87 -86.32 87 -87 87 C-87.67354499 85.56570999 -88.33859701 84.12742943 -89 82.6875 C-89.556875 81.48673828 -89.556875 81.48673828 -90.125 80.26171875 C-91 78 -91 78 -91 75 C-91.66 75 -92.32 75 -93 75 C-95.42706029 56.71036709 -94.99681476 42.66629213 -89 25 C-88.34 25 -87.68 25 -87 25 C-86.77957031 24.14148438 -86.55914062 23.28296875 -86.33203125 22.3984375 C-84.77636414 18.42943343 -82.56277944 15.68783754 -79.6875 12.625 C-78.89496826 11.77627319 -78.89496826 11.77627319 -78.08642578 10.91040039 C-70.26620147 2.85218925 -60.63275788 -2.480446 -50 -6 C-48.1746875 -6.61875 -48.1746875 -6.61875 -46.3125 -7.25 C-31.19310294 -10.5696281 -13.59658822 -7.05008278 0 0 Z M-72 45 C-73.23674251 48.63293114 -73.34458203 50.24191953 -71.75 53.75 C-69.47164688 56.67931116 -67.81463875 57.87603323 -64.125 58.4375 C-60.84330401 58.22479584 -60.84330401 58.22479584 -58.125 55.9375 C-55.75891093 53.11473938 -55.75891093 53.11473938 -55.375 49.5 C-56.16602932 45.0702358 -57.36474785 43.60789828 -61 41 C-65.98779194 40.06478901 -68.59825854 41.3066807 -72 45 Z " fill="#EDF2FD" transform="translate(319,116)"/>
                        <path d="M0 0 C13.02715973 11.7107036 19.73786289 27.29523218 21.328125 44.59375 C22.20886888 62.68569723 16.59038816 78.24263843 4.828125 91.90625 C-4.10919906 101.37794322 -16.69069534 109.17675185 -29.95703125 109.84765625 C-32.15375387 109.85157198 -34.35067455 109.82930406 -36.546875 109.78125 C-38.1875293 109.79768555 -38.1875293 109.79768555 -39.86132812 109.81445312 C-52.11307515 109.7051276 -60.94211527 105.63867955 -70.484375 98.21875 C-71.38929688 97.57873047 -71.38929688 97.57873047 -72.3125 96.92578125 C-83.11714934 88.72131622 -91.1420354 74.41283776 -93.484375 61.21875 C-95.14751056 41.37369361 -92.38029143 23.14867058 -80.64453125 6.62890625 C-78.13405162 3.82788286 -75.40099364 1.49393814 -72.421875 -0.78125 C-71.85259277 -1.21695313 -71.28331055 -1.65265625 -70.69677734 -2.1015625 C-49.37571455 -17.94853879 -20.5254097 -17.09298989 0 0 Z " fill="#EFF3FD" transform="translate(441.484375,114.78125)"/>
                        <path d="M0 0 C7.11038456 5.43122208 11.57194342 12.15398286 13 21 C13.89662008 31.25968552 12.39820345 40.25110837 5.75 48.375 C-0.44096688 54.84436154 -7.71911297 58.93892913 -16.75 59.375 C-24.55072508 59.18731338 -31.67003286 56.21775392 -37.3984375 50.91015625 C-45.55428084 41.18282114 -46.90253335 31.25411477 -46 19 C-45.14551618 15.62112682 -43.85761762 12.9364204 -42 10 C-41.56429688 9.29230469 -41.12859375 8.58460938 -40.6796875 7.85546875 C-30.88448568 -6.56970552 -14.56459443 -8.28536845 0 0 Z " fill="#649DF4" transform="translate(409,138)"/>
                        <path d="M0 0 C8.70158417 4.73273185 14.17992491 11.39448195 18.3125 20.25 C20.28791965 29.40876381 19.4620255 38.82848194 14.48828125 46.88671875 C8.47735455 55.05887752 2.02367618 59.53241535 -8 61.4375 C-17.34455369 62.53214772 -24.11949706 60.06546312 -32.25 55.6875 C-39.85527392 49.46500316 -43.57840729 41.73343438 -44.875 32.125 C-45.45972669 22.93462174 -42.97117804 15.46751557 -37.03125 8.4453125 C-27.32926515 -1.14472638 -13.06404807 -5.32154406 0 0 Z M-38 19.4375 C-39.23674251 23.07043114 -39.34458203 24.67941953 -37.75 28.1875 C-35.47164688 31.11681116 -33.81463875 32.31353323 -30.125 32.875 C-26.84330401 32.66229584 -26.84330401 32.66229584 -24.125 30.375 C-21.75891093 27.55223938 -21.75891093 27.55223938 -21.375 23.9375 C-22.16602932 19.5077358 -23.36474785 18.04539828 -27 15.4375 C-31.98779194 14.50228901 -34.59825854 15.7441807 -38 19.4375 Z " fill="#639AF4" transform="translate(285,141.5625)"/>
                        <path d="M0 0 C2.5 0.4375 2.5 0.4375 4.07421875 2.16796875 C5.57063365 4.5499333 6.1743132 6.46109655 6.8125 9.1875 C9.13114556 17.35682116 14.52176409 23.67638181 21.5 28.4375 C25.0793263 30.31299069 28.76140999 31.85688878 32.59375 33.13671875 C34.5 33.8125 34.5 33.8125 37.5 35.4375 C38.625 38.4375 38.625 38.4375 38.5 41.4375 C36.18972483 44.59357082 33.48157436 45.22115584 29.8125 46.25 C21.12792495 49.00134059 14.66149612 53.61159834 10.2578125 61.7265625 C8.28412802 65.59218122 6.48780812 69.42323764 5 73.5 C3.5 76.4375 3.5 76.4375 1.0625 77.5625 C-2.18439047 77.4041151 -3.13068121 76.63492703 -5.5 74.4375 C-6.80859375 71.80078125 -6.80859375 71.80078125 -7.9375 68.75 C-12.31059079 57.7974554 -16.6813859 51.90496891 -27.6796875 47.02734375 C-29.77521151 46.16551553 -31.88025181 45.32629241 -33.99609375 44.515625 C-36.5 43.4375 -36.5 43.4375 -38.5 41.4375 C-38.875 39 -38.875 39 -38.5 36.4375 C-35.67416065 33.85851559 -32.93417263 32.79542871 -29.3125 31.6875 C-21.00320693 28.76981765 -13.52068868 23.46393055 -9.5 15.4375 C-8.38826098 12.35111982 -7.39656967 9.26270754 -6.4921875 6.109375 C-5.12084171 2.41645958 -3.93757058 0.68907485 0 0 Z " fill="#FBD175" transform="translate(75.5,37.5625)"/>
                        <path d="M0 0 C2.375 1.5 2.375 1.5 4 4 C4.77577846 8.30636204 4.73064701 11.75181136 2.5 15.5625 C-1.0347576 17.59498562 -4.02340703 17.92895819 -8 17 C-11.26104325 14.30963932 -11.9034571 12.67580027 -12.5 8.5 C-11.9231981 4.46238667 -10.85349783 2.85349783 -8 0 C-5.02898609 -1.48550695 -3.16565278 -0.82306972 0 0 Z " fill="#F4F9FC" transform="translate(380,151)"/>
                    </svg>
                </div>
            </div>
            <!-- 木槌颜色选择器 -->
            <div class="mallet-color-selector">
                <div class="color-label">木槌颜色:</div>
                <div class="color-options">
                    <div class="color-option active" data-head-color="#FFD700" data-handle-color="#8B4513" title="经典金色"></div>
                    <div class="color-option" data-head-color="#FF6B6B" data-handle-color="#4A4A4A" title="红色"></div>
                    <div class="color-option" data-head-color="#4ECDC4" data-handle-color="#2C3E50" title="青色"></div>
                    <div class="color-option" data-head-color="#45B7D1" data-handle-color="#34495E" title="蓝色"></div>
                    <div class="color-option" data-head-color="#96CEB4" data-handle-color="#5D4E75" title="绿色"></div>
                    <div class="color-option" data-head-color="#FFEAA7" data-handle-color="#6C5CE7" title="黄色"></div>
                    <div class="color-option" data-head-color="#FD79A8" data-handle-color="#2D3436" title="粉色"></div>
                    <div class="color-option" data-head-color="#A29BFE" data-handle-color="#636E72" title="紫色"></div>
                </div>
            </div>
        </main>
        
        <footer>
            <p>© 2025 电子木鱼 - 功德无量，阿弥陀佛 🙏</p>
        </footer>
    </div>

    <script>
        const themeSwitch = document.getElementById('theme-switch');
        const shareButton = document.getElementById('share-button');
        const muyu = document.getElementById('muyu');
        const muyuContainer = document.getElementById('muyu-container');
        const mallet = document.getElementById('mallet');
        const gongdeCountElement = document.getElementById('gongde-count');
        const gameArea = document.querySelector('.game-area');
        const colorOptions = document.querySelectorAll('.color-option');
        
        let gongde = parseInt(localStorage.getItem('gongde') || '0');
        gongdeCountElement.textContent = gongde;

        // 木槌颜色切换功能
        function changeMalletColor(headColor, handleColor) {
            // 计算较深的颜色用于渐变
            const headColorDark = adjustBrightness(headColor, -20);
            const handleColorLight = adjustBrightness(handleColor, 20);
            
            // 设置CSS变量
            document.documentElement.style.setProperty('--mallet-head-color', headColor);
            document.documentElement.style.setProperty('--mallet-head-color-dark', headColorDark);
            document.documentElement.style.setProperty('--mallet-handle-color', handleColor);
            document.documentElement.style.setProperty('--mallet-handle-color-light', handleColorLight);
            
            // 保存到本地存储
            localStorage.setItem('mallet-head-color', headColor);
            localStorage.setItem('mallet-handle-color', handleColor);
        }

        // 调整颜色亮度的辅助函数
        function adjustBrightness(hex, percent) {
            // 移除 # 符号
            hex = hex.replace('#', '');
            
            // 转换为 RGB
            const r = parseInt(hex.substr(0, 2), 16);
            const g = parseInt(hex.substr(2, 2), 16);
            const b = parseInt(hex.substr(4, 2), 16);
            
            // 调整亮度
            const newR = Math.max(0, Math.min(255, r + (r * percent / 100)));
            const newG = Math.max(0, Math.min(255, g + (g * percent / 100)));
            const newB = Math.max(0, Math.min(255, b + (b * percent / 100)));
            
            // 转换回十六进制
            return '#' + 
                Math.round(newR).toString(16).padStart(2, '0') +
                Math.round(newG).toString(16).padStart(2, '0') +
                Math.round(newB).toString(16).padStart(2, '0');
        }

        // 颜色选项点击事件
        colorOptions.forEach(option => {
            option.addEventListener('click', () => {
                // 移除所有活动状态
                colorOptions.forEach(opt => opt.classList.remove('active'));
                // 添加当前选项的活动状态
                option.classList.add('active');
                
                // 获取颜色数据
                const headColor = option.getAttribute('data-head-color');
                const handleColor = option.getAttribute('data-handle-color');
                
                // 切换木槌颜色
                changeMalletColor(headColor, handleColor);
            });
        });

        // 初始化木槌颜色
        function initMalletColor() {
            const savedHeadColor = localStorage.getItem('mallet-head-color');
            const savedHandleColor = localStorage.getItem('mallet-handle-color');
            
            if (savedHeadColor && savedHandleColor) {
                changeMalletColor(savedHeadColor, savedHandleColor);
                
                // 设置对应的颜色选项为活动状态
                colorOptions.forEach(option => {
                    const headColor = option.getAttribute('data-head-color');
                    const handleColor = option.getAttribute('data-handle-color');
                    
                    if (headColor === savedHeadColor && handleColor === savedHandleColor) {
                        colorOptions.forEach(opt => opt.classList.remove('active'));
                        option.classList.add('active');
                    }
                });
            }
        }
        
        // 初始化木槌颜色
        initMalletColor();

        // 主题切换功能
        function setTheme(theme) {
            document.documentElement.setAttribute('data-theme', theme);
            localStorage.setItem('theme', theme);
            themeSwitch.checked = theme === 'dark';
        }

        themeSwitch.addEventListener('change', () => {
            setTheme(themeSwitch.checked ? 'dark' : 'light');
        });

        // 初始化主题
        const savedTheme = localStorage.getItem('theme') || 
            (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
        setTheme(savedTheme);

        // 分享功能
        shareButton.addEventListener('click', async () => {
            // 复制链接到剪贴板
            navigator.clipboard.writeText(window.location.href).then(() => {
                    showNotification('链接已复制到剪贴板！赶快和其他同事一起敲木鱼吧！');
                }).catch(() => {
                    showNotification('复制失败，请手动复制链接');
                });
        });

        // 创建功德动画
        function createGongdeAnimation(x, y) {
            const animation = document.createElement('div');
            animation.classList.add('gongde-animation');
            animation.textContent = gongdeMessages[Math.floor(Math.random() * gongdeMessages.length)];
            
            // 获取木鱼容器的位置
            const muyuRect = muyuContainer.getBoundingClientRect();
            const gameAreaRect = gameArea.getBoundingClientRect();
            
            // 计算木鱼相对于游戏区域的中心位置
            const muyuCenterX = muyuRect.left + muyuRect.width / 2 - gameAreaRect.left;
            const muyuCenterY = muyuRect.top + muyuRect.height / 2 - gameAreaRect.top;
            
            // 在木鱼周围的小范围内随机偏移
            const offsetX = (Math.random() - 0.5) * 120;
            const offsetY = (Math.random() - 0.5) * 80;
            
            // 随机旋转角度
            const rotation = (Math.random() - 0.5) * 30;
            
            animation.style.left = `${muyuCenterX + offsetX}px`;
            animation.style.top = `${muyuCenterY + offsetY}px`;
            animation.style.transform = `rotate(${rotation}deg)`;
            
            gameArea.appendChild(animation);

            // 动画结束后移除元素
            animation.addEventListener('animationend', () => {
                animation.remove();
            });
        }

        // 创建击打效果
        function createHitEffect(x, y) {
            const effect = document.createElement('div');
            effect.classList.add('hit-effect');
            
            // 获取木鱼容器的位置
            const muyuRect = muyuContainer.getBoundingClientRect();
            const gameAreaRect = gameArea.getBoundingClientRect();
            
            // 计算木鱼相对于游戏区域的中心位置
            const muyuCenterX = muyuRect.left + muyuRect.width / 2 - gameAreaRect.left;
            const muyuCenterY = muyuRect.top + muyuRect.height / 2 - gameAreaRect.top;
            
            effect.style.left = `${muyuCenterX - 60}px`;
            effect.style.top = `${muyuCenterY - 60}px`;
            
            gameArea.appendChild(effect);
            
            effect.addEventListener('animationend', () => {
                effect.remove();
            });
        }

        // 动画状态标记
        let isAnimating = false;

        // 敲木鱼事件
        function hitMuyu(event) {
            // 增加功德
            gongde++;
            gongdeCountElement.textContent = gongde;
            localStorage.setItem('gongde', gongde.toString());

            // 获取点击位置
            const rect = gameArea.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;

            // 创建动画效果
            createGongdeAnimation(x, y);
            createHitEffect(x, y);

            // 只有在没有动画进行时才执行木槌和木鱼动画
            if (!isAnimating) {
                isAnimating = true;
                
                // 木槌圆周运动击打动画
                mallet.classList.remove('hitting-back');
                mallet.classList.add('hitting');
                
                // 木鱼摇晃效果
                const muyuElement = document.getElementById('muyu');
                muyuElement.classList.add('shake');
                
                setTimeout(() => {
                    mallet.classList.remove('hitting');
                    mallet.classList.add('hitting-back');
                    setTimeout(() => {
                        mallet.classList.remove('hitting-back');
                        isAnimating = false; // 动画结束，重置状态
                    }, 200);
                }, 200);
                
                // 移除摇晃效果
                setTimeout(() => {
                    muyuElement.classList.remove('shake');
                }, 300);
            }

            // 震动效果（如果支持）
            if (navigator.vibrate) {
                navigator.vibrate(50);
            }

            // 播放音效（可选，需要音频文件）
            // const audio = new Audio('muyu-sound.mp3');
            // audio.play().catch(() => {});
        }

        // 获取扩大的点击区域元素
        const extendedClickArea = document.getElementById('extended-click-area');
        
        // 绑定点击和触摸事件
        muyuContainer.addEventListener('click', hitMuyu);
        mallet.addEventListener('click', hitMuyu);
        extendedClickArea.addEventListener('click', hitMuyu);
        
        // 添加触摸事件支持（手机端）
        muyuContainer.addEventListener('touchstart', function(event) {
            event.preventDefault(); // 防止触发点击事件
            // 获取触摸位置
            const touch = event.touches[0];
            const syntheticEvent = {
                clientX: touch.clientX,
                clientY: touch.clientY
            };
            hitMuyu(syntheticEvent);
        });
        
        mallet.addEventListener('touchstart', function(event) {
            event.preventDefault(); // 防止触发点击事件
            // 获取触摸位置
            const touch = event.touches[0];
            const syntheticEvent = {
                clientX: touch.clientX,
                clientY: touch.clientY
            };
            hitMuyu(syntheticEvent);
        });
        
        extendedClickArea.addEventListener('touchstart', function(event) {
            event.preventDefault(); // 防止触发点击事件
            // 获取触摸位置
            const touch = event.touches[0];
            const syntheticEvent = {
                clientX: touch.clientX,
                clientY: touch.clientY
            };
            hitMuyu(syntheticEvent);
        });

        // 键盘快捷键（空格键）
        document.addEventListener('keydown', (event) => {
            if (event.code === 'Space') {
                event.preventDefault();
                // 模拟在木鱼中心点击
                const rect = muyuContainer.getBoundingClientRect();
                const centerX = rect.left + rect.width / 2;
                const centerY = rect.top + rect.height / 2;
                
                const syntheticEvent = {
                    clientX: centerX,
                    clientY: centerY
                };
                
                hitMuyu(syntheticEvent);
            }
        });

        // 添加一些随机的功德提示语
        const gongdeMessages = [
            '功德 +1',
            '善哉善哉 +1',
            '阿弥陀佛 +1',
            '功德无量 +1',
            '南无阿弥陀佛 +1',
            '心诚则灵 +1',
            '积德行善 +1',
            '​​功德到账：+1！',
            '​​佛系正能量 +1',
            '​​爱因斯坦脑子 +1',
            '​​好运气 +1',
            '​​超好运气 +1',
            '​​狗屎运 +1',
            '​​桃花运 +1',
            '​​Bug -1',
            '​​晦气 -1',
            '​​生气 -1',
            '​​暴躁 -1',
            '​​心静自然凉 +1',
            '​​敲一敲，烦恼消+1',
            '🫰 ​​赛博功德 +1',
            '📈 ​​功德指数缓慢上升中...',
            '✨ ​​叮！功德金光一闪',
            '👍 ​​佛祖点了个赞',
            '🔮 ​​随喜功德，好运+1',
            '📦 ​​功德福报，包裹已签收',
            '🔁 ​​敲一下，功德永流传~',
            '💪 ​​功德无量！法力+1',
            '😌 ​​心平气和，功德自来',
            '🧠 ​​烦恼敲散，功德+1',
            '🎯 ​​精准积德，功德暴击',
            '💡 ​​顿悟+1，功德也随之+1',
            '🔁 ​​轮回路上，路费+1',
            '🤖 ​​赛博舍利，开始凝聚...',
            '✍️ ​​功德簿上，又添一笔！',
            '🧘 ​​静心buff，功德+1.5',
            '🦟 ​​蚊子：谢谢你饶我一命！(功德+1)',
            '🤫 ​​积德成功 + 1',
        ];


        
        // 显示通知函数
        function showNotification(message) {
            const notification = document.getElementById('share-notification');
            notification.textContent = message;
            notification.classList.add('show');
            setTimeout(() => {
                notification.classList.remove('show');
            }, 2000);
        }
    </script>
    
    <div id="share-notification" class="share-notification"></div>
</body>
</html>